<template>
  <view>
    <view class="p-2 border-bottom d-flex a-center bg-white">
      <view class="font-md text-secondary mr-1 flex-shrink">收货人：</view>
      <input class="px-1 font-md flex-1" type="text" v-model="form.name" />
    </view>

    <view class="p-2 d-flex a-center bg-white">
      <view class="font-md text-secondary mr-1 flex-shrink">手机号码：</view>
      <input class="px-1 font-md flex-1" type="text" v-model="form.phone" />
    </view>

    <view class="p-2 d-flex a-center bg-white">
      <view class="font-md text-secondary mr-1 flex-shrink">邮编：</view>
      <input class="px-1 font-md flex-1" type="text" v-model="form.zip" />
    </view>
    
    <divider></divider>

    <view class="p-2 border-bottom d-flex a-center bg-white">
      <view class="font-md text-secondary mr-1 flex-shrink">所在地区：</view>
      <picker class="custom-picker" :range="cities" @change="onCityChange" mode="selector" :cancel-text="'取消'" :confirm-text="'完成'">
        <view class="picker-text">{{ selectedCity || '请选择所在地区' }}</view>
      </picker>
    </view>

    <view class="p-2 d-flex a-center bg-white">
      <view class="font-md text-secondary mr-1 flex-shrink">详细地址：</view>
      <input class="px-1 font-md flex-1" type="text" v-model="form.address" />
    </view>
    
    <divider></divider>

    <view class="p-2 d-flex a-center bg-white">
      <view class="font-md text-secondary mr-1 flex-shrink">设为默认地址：</view>
      <switch :checked="form.default" class="ml-auto" color="#FD6801" @change="handleSwitchChange"/>
    </view>

    <view class="p-3">
      <view class="save-button" @click="submit">
        保 存
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        zip: '',
        address: '',
        default: false
      },
      cities: [
        '北京市', '天津市', '上海市', '重庆市', '河北省', '山西省', '辽宁省', '吉林省', '黑龙江省', '江苏省', 
        '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', 
        '海南省', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', 
        '香港特别行政区', '澳门特别行政区', '台湾省'
      ],
      selectedCity: ''
    };
  },
  methods: {
    onCityChange(event) {
      this.selectedCity = this.cities[event.detail.value];
    },
    handleSwitchChange(event) {
      this.form.default = event.detail.value;
    },
    submit() {
      if (!this.form.name || !this.form.phone || !this.form.address || !this.selectedCity) {
        uni.showToast({
          title: '请填写完整的地址信息',
          icon: 'none'
        });
        return;
      }
      console.log('提交的数据：', { ...this.form, city: this.selectedCity });
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
    }
  }
};
</script>

<style scoped>
.custom-picker {
  flex: 1;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
}
.picker-text {
  color: #666;
}
.save-button {
  background-color: #FD6801;
  color: white;
  border-radius: 5px;
  padding: 12px;
  text-align: center;
  font-size: 16px;
}
.save-button:hover {
  background-color: #f96321;
}
</style>
